<template>
	<view class="my-settle-container">
	<!-- 结算组件 -->
   <!-- 全选 -->
    <label class="radio" @click="checkedAllState">
      <radio color="#c00000" :checked="isFullCheck" /><text>全选</text>
    </label>
   <!-- 合计 -->
   <view class="amount-box">
     合计: <text class="amount">￥{{checkedGoodsAmount}}</text>
   </view>
   <!-- 结算 -->
   <view class="btn-settle" @click="settlement">
     结算({{checkedCount}})
   </view>
	</view>
</template>

<script>
  import {mapState,mapGetters,mapMutations} from 'vuex'
	export default {
    computed:{
      ...mapState('m_cart',['cart']),
      ...mapState('m_address',['token']),
      ...mapGetters('m_cart',['checkedCount','total','checkedGoodsAmount']),
      ...mapGetters('m_address',['addstr']),
      // 是否全选
      isFullCheck(){
        return this.total === this.checkedCount
      }
      
    },
		data() {
			return {
        // 倒计时秒数
				seconds:3,
        // 定时器值
        timer:null
			};
		},
    methods:{
      ...mapMutations('m_cart',['undataAllGoodsState']),
      ...mapMutations('m_address',['updateRedirectInfo']),
      // 全选反选
      checkedAllState(){
        this.undataAllGoodsState(!this.isFullCheck)
      },
      // 点击结算按钮
      settlement(){
        // 判断结算商品
        if(!this.checkedCount) return uni.$showMsg('请选择结算商品')
        // 判断收货地址
        if(!this.addstr) return uni.$showMsg('请选择收货地址')
        // 判断是否登录
        if(!this.token) return this.delayNavigate()
        
        // 调支付
        this.payOrder()
        
      },
      async payOrder(){
        // 参数
        const orderInfo = {
          // order_price : this.checkedGoodsAmount(),
          order_price : 0.01,
          consignee_addr:this.addstr,
          goods:this.cart.filter(x=>x.goods_state).map(x=>({goods_id:x.goods_id,goods_number:x.goods_count,goods_price:x.goods_price}))
        }
        console.log(orderInfo);
        // 发请求
        const {data:res} = await uni.$http.post('/api/public/v1/my/orders/create',orderInfo)
        // console.log(res);
        if(res.meta.status !== 200) return uni.$showMsg("创建订单失败")
        const orderNumber = res.message.order_number
        // console.log(orderNumber);
        // 预支付
        const {data:res2} = await uni.$http.post('/api/public/v1/my/orders/req_unifiedorder',{order_number:orderNumber})
        if(res2.meta.status !== 200) return uni.$showMsg("预付订单生成失败")
        const payInfo = res2.message.pay
        console.log(res2);
        // 支付
        const [err,succ] = await uni.requestPayment(payInfo)
        if(err) return uni.$showMsg('订单未支付')
        const {data:res3} = await uni.$http.post('/api/public/v1/my/orders/chkOrder',{order_number:orderNumber})
        if(res2.meta.status !== 200) return uni.$showMsg("订单未支付")
        uni.showToast({
          title:'支付完成',
          icon:'success'
        })
        
      },
      // 倒计时弹窗
      showTips(n){
        uni.showToast({
          icon:'none',
          title:'请登录后再结算，'+n+'秒后跳转登录页',
          // 遮罩避免点击
          mask:true,
          // 自动消失
          duration:1500
        })
      },
      //倒计时
      delayNavigate(){
        this.showTips(this.seconds)
       
        this.timer = setInterval(()=>{
          this.seconds --
          if(this.seconds<=0){
              clearInterval(this.timer)  
              // 跳转
              uni.switchTab({
                url:'/pages/my/my',
                success:()=> {
                  this.updateRedirectInfo({
                    openType:'switchTab',
                    from:'/pages/cart/cart'
                  })
                }
              })
              return
          }
          // 弹窗
          this.showTips(this.seconds)
        },1000)
      },
      // 
    }
	}
</script>

<style lang="scss">
  .my-settle-container{
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50px;
    background-color: white;
    
    padding-left:5px ;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
    
    .radio{
      display: flex;
      align-items: center;
    }
    .amount{
      color: #C00000;
    }
    .btn-settle{
      height: 50px;
      min-width:100px ;
      background-color: #C00000;
      color: #FFFFFF;
      line-height: 50px;
      text-align: center;
      padding: 0 10px;
    }
    
  }
</style>
